<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>快速创建地球</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
		<script type="text/javascript" src="../assets/plugins/include-lib.js"
			include="jquery,bootstrap,admin-lte,haoutil,jquery.scrollTo,ace,lazyload" libpath="../assets/plugins/">
		</script>
		<link rel="stylesheet" href="../assets/plugins/bootstrap/bootstrap-checkbox/awesome-bootstrap-checkbox.css"
			type="text/css" />
		<link rel="stylesheet" href="../../../build/Cesium/Widgets/widgets.css" type="text/css" />
		<link rel="stylesheet" href="../../../build/CEarth/CEarth.css" />
		<link rel="stylesheet" href="../assets/plugins/layui/css/layui.css" type="text/css" />
		<link rel="stylesheet" href="../assets/css/CEarth-Example.css" type="text/css" />

	</head>
	<body>
		<div id="CEarthContainer" class="CEarth-container"></div>


		<!-- 面板 -->
		<div class="infoview">
			<table width="300">
				<tr>
					<td>夸张程度</td>
					<td style="width: 12.5rem;">
						<div id="txt_gradations" class="demo-slider"></div>
					</td>
				</tr>
			</table>
		</div>

		<script src="../assets/plugins/layui/layui.js"></script>
		<script src="../../../build/Cesium/Cesium.js"></script>
		<script src="../../../build/CEarth/CEarth.js"></script>
		<script>
			layui.use('slider', function() {
				var $ = layui.$,
					slider = layui.slider;
				//创建三维地球场景 
				var viewer = new CEarth.App('CEarthContainer', {
					scene: {
						center: {
							x: 102.833722,
							y: 24.881539,
							z: 50000,
							heading: 0,
							pitch: -90
						},
						showSun: true,
						showMoon: true,
						showSkyBox: true,
						showSkyAtmosphere: false,
						fog: true,
						fxaa: true,
						globe: {
							show: true,
							showGroundAtmosphere: false,
							depthTestAgainstTerrain: false,
							baseColor: '#546a53',
						},
						cameraController: {
							zoomFactor: 3.0,
							minimumZoomDistance: 1,
							maximumZoomDistance: 50000000,
							enableRotate: true,
							enableZoom: true,
						},
					},
					control: {
						baseLayerPicker: false, //basemaps底图切换按钮
						homeButton: true, //视角复位按钮
						sceneModePicker: true, //二三维切换按钮
						navigationHelpButton: true, //帮助按钮
						navigationInstructionsInitiallyVisible: false,
						fullscreenButton: true, //全屏按钮
						timeline: false, //时间轴
						animation: false, //动画部件
					},
					terrainViewModels: [{
						name: '地形服务【xyz】',
						iconUrl: Cesium.buildModuleUrl(
							'Widgets/Images/TerrainProviders/CesiumWorldTerrain.png'),
						tooltip: 'arcgis官方提供的高分辨率全球地形',
						category: '',
						params: {
							type: 'xyz',
							url: 'http://data.marsgis.cn/terrain',
							requestVertexNormals: true
						}
					}],
					imageryViewModels: [{
							name: '天地图影像(EPSG:3857)',
							iconUrl: '../assets/img/tdt_img.png',
							tooltip: '天地图影像(EPSG:3857)',
							params: {
								type: 'wmts',
								url: 'http://t{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=2a0e637a8772d92b123ee8866dee4a82',
								subdomains: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11',
									'12', '13', '14', '15', '16', '17', '18'
								],
								layer: "tdtImgLayer",
								style: "default",
								format: "image/jpeg",
								tileMatrixSetID: "GoogleMapsCompatible", //使用谷歌的瓦片切片方式
								show: true
							},
							show: true,
							index: 0
						},
						{
							name: 'OSM地图',
							iconUrl: Cesium.buildModuleUrl(
								'Widgets/Images/ImageryProviders/openStreetMap.png'),
							tooltip: 'OSM地图',
							params: {
								type: 'osm',
								url: 'https://a.tile.openstreetmap.org/'
							},
							show: false,
							index: 1
						}
					]
				});
				viewer.scene.globe.terrainExaggeration  = 10
				//开启输入框
				slider.render({
					elem: '#txt_gradations'
					,value: 10 //初始值
					,min: 1
					,max: 99
					,step: 1 //步长
					,change: function(value){
						viewer.scene.globe.terrainExaggeration  = value;
						console.log(viewer.scene.globe.terrainExaggeration)
					}
				});
			});
		</script>
	</body>
</html>
